<template>
	<view>
		<view class="form">
			<u--form labelPosition="left" ref="uForm">
				<u-form-item label="登录账号" ref="item1" labelWidth="200">
					<view class="u-flex">
						<u--input border="none" placeholder="请输入账号" v-model="account"></u--input>
						<view class="cus-blue-btn" @click="inquireAccount">查询</view>
					</view>
				</u-form-item>
				<u-form-item label="姓名" ref="item1" labelWidth="200">
					<u--input border="none" placeholder="请输入姓名" v-model="form.name"></u--input>
				</u-form-item>
				<u-form-item label="手机号码" ref="item1" labelWidth="200">
					<u--input border="none" placeholder="请输入手机号" v-model="form.phone"></u--input>
				</u-form-item>
				<!-- 	<u-form-item label="员工岗位" borderBottom ref="item1" labelWidth="200">
					<u--input border="none"></u--input>
					<view >
						<u-action-sheet :actions="list" :title="title" :show="show" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="show=false"></u-action-sheet>
					</view>
				</u-form-item> -->
			</u--form>
			<view class="u-flex a-center">
				<view class="w105">
					员工岗位
				</view>
				<view class="w200">
					<uni-data-select v-model="value" :localdata="range" @change="change" class="w200"></uni-data-select>
				</view>
			</view>
			<view class="u-flex a-center">
				<view class="w105">
					角色权限
				</view>
				<MultipleSelect :selectList="roleList" :selectData="selectData" @change="multipleChange" @del="delItem">
				</MultipleSelect>
			</view>
		</view>
		<view class="footer pd-10">
			<view class="save-btn" @click="pullEmp">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import MultipleSelect from '../../pages/components/select/MultipleSelect.vue.vue';
	export default {
		components: {
			MultipleSelect
		},
		data() {
			return {
				title: '标题',
				range: [
					// {
					// 	value: 0,
					// 	text: "二级部门"
					// },
					// {
					// 	value: 1,
					// 	text: "二级部门"
					// },
					// {
					// 	value: 2,
					// 	text: "二级部门"
					// },
				],
				account: '',
				form: {
					name: '',
					phone: '',
					accountId: '',
					acId: '',
					department: '',
					role: '',
					custAccId: ''
				},
				custAccId: '',
				id: '',
				roleList: [],
				selectData: [],
				value: null,
				acId: ''
			};
		},
		onLoad(e) {
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId = uni.getStorageSync('acId')
			this.id = e.id
			this.value = parseInt(e.id)
			this.find_AllRole()
		
			this.form.custAccId = uni.getStorageSync('custAccid')
			this.form.acId = uni.getStorageSync('acId')
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh() {
				console.clear()

				this.find_AllRole()
				
			},
			// 查询账号
			async inquireAccount() {
				const res = await uni.$api.authority.inquireAccount({
					custAccId: this.custAccId,
					account: this.account
				})
				console.log(res, '查询账号')
				if (res.code === 0) {
					this.form.name = res.data.empName || ''
					this.form.phone = res.data.einfoPhone || ''
					this.form.accountId = res.data.acId || ''
				} else {
					uni.showToast({
						title: res.msg
					})
				}
			},
			change(e) {
				console.log(e)
			}, 
			async find_AllRole() {
				const res = await uni.$api.authority.findAllRole({
					custAccId: this.custAccId
				})
				this.roleList = res.data
				this.roleList.map((v, i) => {
					this.roleList[i] = {
						label: v.roName,
						value: v.id,
					}
				})
				this.find_AllStructure()

			},
			multipleChange(val, idx) {
				console.log('选中', val, idx)
				// this.form.role=
				console.log(val)
				this.form.role = val.toString()
				console.log(this.form.role, 'this.form.role')
			},
			// 查询所有部门
			async find_AllStructure() {
				const res = await uni.$api.organization.findAllStructure({
					custAccId: this.custAccId
				})
				this.range = res.data.map((i) => {
					return {
						...i,
						text: i.stName,
						value: i.id
					}

				});
				uni.stopPullDownRefresh()
			},
			// 保存
			async pullEmp() {
				this.form.department = this.value
				const res = await uni.$api.authority.pullEmp(this.form)
				console.log(res)
				if (res.code === 0) {
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/.uni-select__selector {
		z-index: 2000 !important;
	}

	.form {
		padding: 15px;

		.w105 {
			width: 100px;
			padding: 10px 0;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.save-btn {
		background-color: #fd7400;
		color: #fff;
		height: 50px;
		font-size: 16px;
		border-radius: 2px;
		line-height: 50px;
		text-align: center;
	}

	.w200 {
		width: 200px;
	}
</style>